<template>
	<view class="container">
		<view class="header">
			<view class="avatar"><image src="../../static/logo.png" mode=""></image></view>
			<view class="others">
				<view></view>
				<view></view>
				<view></view>
			</view>
		</view>
		<view class="list"></view>
	</view>
	<myTabbar></myTabbar>
</template>

<script setup>
import myTabbar from '../../components/Tabbar.vue'
</script>

<style lang="less" scoped>
.container {
	width: 100%;
	display: flex;
	background-color: #f5f5f5;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px;
	.header {
		width: 100%;
		background-color: #fdeee3;
		display: flex;
		flex-direction: column;
		.avatar {
			height: 150px;
			align-self: flex-start;
			image {
				margin-top: 60px;
				width: 60px;
				height: 60px;
			}
		}
		.others {
			display: flex;
			justify-content: space-between;
			view {
				width: 120px;
				height: 100px;
				border: 1px solid black;
			}
		}
	}
	.list {
		height: 250px;
		width: 100%;
		margin-top: 20px;
		background-color: aquamarine;
	}
}
</style>
